<template>
  <main>
    <header>
      <div class="header-con">
        <div class="header-top">
          <p>Web开发工程师&nbsp;<span>8K</span></p>
          <button>立即沟通</button>
        </div>

        <p>长沙·经验不限·大专</p>
      </div>

    </header>
    <article>
      <!--  公司头像部分    -->
      <div id="art-top">
        <img src="@/assets/img/Avatar.jpg" alt="">
        <div class="art-top-msg">
          <p>腾讯科技</p>
          <div  style="display: flex;justify-content: space-between;color: rgb(159,163,175)">
            <p style="color: rgb(180,193,127);font-weight: 100">互联网</p>
            <i class="el-icon-warning">举报</i>
          </div>

        </div>
      </div>

      <!--  职位描述-->
      <div id="describe">
        <h5>职位描述</h5>
        <div class="describe-list">
          <p>1、大专及以上学历，计算机或相关</p>
          <p>2、大专及以上学历，计算机或相关</p>
          <p>3、大专及以上学历，计算机或相关</p>
          <p>4、大专及以上学历，计算机或相关</p>
        </div>
        <h5>工商信息</h5>
        <div class="industrial-list">
          <p><span class="options">法人代表：</span>龙年生</p>
          <p><span class="options">成立时间：</span>2002-12-23</p>
        </div>
      </div>
    </article>
  </main>
</template>

<script>
import {getRecUnit} from "@/network/recruitment"
export default {
  name: "recDetails",
  methods:{
    getDa(id){
      getRecUnit(id).then(res=>{
        console.log(res)
      })
    }
  }

}
</script>

<style scoped lang="stylus">
@keyframes start{
  0%{
    height 0
  }
  100%{
    height 100vh
  }
}
main
  width 100%
  animation start ease-out .2s
  background white
  & *
    margin 0
    padding 0
header
  width 100%
  height 100px
  display flex
  align-items center
  padding 10px
  box-sizing border-box
  background rgb(66,74,95)
  &
  p
    color gainsboro
  p:first-child
    font-size 30px
    color white
    &>span
      color rgb(250,106,67)

.header-con
  width 100%
.header-top
  width 100%
  display flex
  justify-content space-between
  & button
    outline none
    border none
    background-color rgb(93,213,200)
    width 25%
    color white
    cursor pointer
    transition background-color .2s
    &:hover
      background-color: #a7a7a4;

article
  background white
  height 100vh
#art-top
  display flex
  padding 10px
  box-sizing border-box
  width 100%
  height 70px
  & img
    height 60px
    border-radius 50%
.art-top-msg
  margin 0 10px
  width 100%
  display flex
  flex-direction column
  justify-content space-around
  & p:first-child
    color rgb(66,74,94)
    font-weight 600

#describe
  width 100%
  box-sizing border-box
  padding 10px
  & h5
    text-decoration underline orange
    line-height 30px
.describe-list p
  font-size 13px
  color rgb(97,104,124)
  line-height 30px
.industrial-list p
  line-height 30px
  font-size 13px
.options
  color rgb(159,163,175)
</style>
